/**
 * Created By ZaraNengap 2018/9/4
 * 组件模版
 */
import React from 'react';
import { Row, Col, Table } from 'antd'
import ComponentExample from 'containers/component-lib/component-example'
import "styles/component-lib/component-template.scss"

class ComponentTemplate extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      columns: [{
        title: '参数', dataIndex: 'param', width: '20%',
        render: text => <span style={{ color: '#003a8c' }}>{text}</span>
      },{
        title: '描述', dataIndex: 'description', width: '40%', render: this.getDescription
      },{
        title: '类型', dataIndex: 'type', width: '20%',
        render: text => <span style={{ color: '#c41d7f', wordBreak: 'break-all' }}>{text}</span>
      },{
        title: '默认值', dataIndex: 'defaultValue', width: '20%'
      }]
    }
  }

  getDescription = description => {
    let result = [];
    description.split('::').map((section, index) => {
      result.push(index % 2 === 0 ? section : <code className="font-code" key={index}>{section}</code>)
    });
    return result;
  };

  render() {
    const { component } = this.props;
    const { columns } = this.state;
    return (
      <div className="component-template">
        <h1>{component.name} - <span style={{fontStyle: 'italic' }}>{component.author}</span></h1>
        <p>{this.getDescription(component.description)}</p>
        <h3>演示</h3>
        {component.isExampleFull ? (
          <div style={{ width: '100%', marginBottom: 24 }}>
            {component.example.map((example, index) => <ComponentExample example={example} key={index}/>)}
          </div>
        ) : (
          <Row gutter={20}>
            <Col span={12}>
              {component.example.map((example, index) =>
                index % 2 === 0 && (<ComponentExample example={example} key={index} componentKey={component.key}/>))}
            </Col>
            <Col span={12}>
              {component.example.map((example, index) =>
                index % 2 !== 0 && (<ComponentExample example={example} key={index} componentKey={component.key}/>))}
            </Col>
          </Row>
        )}
        {component.api.map((api, index) => (
          <div key={index} style={{ marginTop: 24 }}>
            <h3>{api.title}</h3>
            <p>{this.getDescription(api.description)}</p>
            <Table
              columns={columns}
              dataSource={api.data}
              pagination={false}
            />
          </div>
        ))}
      </div>
    );
  }
}

ComponentTemplate.PropTypes = {
  component: React.PropTypes.object.isRequired
};

export default ComponentTemplate;
